<template>
  <div class="header">
	<img src="../assets/logo.png" alt="">
	<div class="menu_list">
		<label @click="$router.push('/about')">总数据可视化</label>
		<label @click="$router.push('/dandata')">回收点数据可视化</label>
	</div>
	<div class="username">
		<label>Hi!~{{username}}</label>
		<arrow-down class="jiantou"></arrow-down>
		<div class="box_usermenu">
			<div @click="loginout">退出</div>
		</div>
	</div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data(){
	  return{
		  username:'张三'
	  }
  },
  created() {
  	this.username=this.$store.state.userInfo.name
  },
 
  methods:{
	  loginout(){
		  this.$store.commit('setUserInfo')
		  this.$router.push('/login')
	  }
  },
 
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.header{
	flex: 1000;
	width: 100%;
	height: 60px;
	background-color: #41454b;
	padding: 0 0.5rem;
	display: flex;
	color: #fff;
	justify-content: space-between;
	align-items: center;
	img{
		height: 60px;
		cursor: pointer;
	}
	label{
		cursor: pointer;
		font-size: 0.16rem;
	}
	.menu_list{
		width: 80%;
		text-align: left;
		label{
			font-size: 0.24rem !important;
			color: #adb4cc;
			margin-right: 0.5rem;
		}
	}
	.username{
		position: relative;
		height: 100%;
		display: flex;
		align-items: center;
		padding: 0 0.5rem;
		.jiantou{
			width: 0.2rem;
			margin-left: 0.1rem;
			transition:all 0.2s;
		}
		.box_usermenu{
			position: absolute;
			top: 62px;
			width: 2rem;
			background-color: #41454b;
			right: 0;
			box-sizing: border-box;
			height: 0;
			overflow: hidden;
			cursor: pointer;
			transition:all 0.2s;
			display: flex;
			align-items: center;
			border-radius: 0.02rem;
			div{
				padding-left: 0.1rem;
			}
		}
	}
	.username:hover{
		background-color: rgb(52,55,60);
		.jiantou{
			transform: rotate(180deg);
		}
		.box_usermenu{
			height: 30px;
		}
	}
}
</style>
